<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: DESKTOP-3LI1LES
 * @LastEditTime: 2021-08-07 19:42:37
-->
<template>
  <div class="article">
    <!-- 头部 -->
    <Head></Head>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <img src="./../assets/listbanner.png" alt="">
        <div class="article_content" v-if="article">
          <div class="sub_title">
            <span>{{article.category.name}}</span>
            <span>
              当前位置：首页->{{article.category.name}}->{{article.title}}->正文
            </span>
          </div><hr>
          <div class="title">{{article.title}}</div>
          <div class="info">
            <span>分类：{{article.category?article.category.name:'无'}}</span>
            <span>作者：{{article.baseUser?article.baseUser.realname:'匿名'}}</span>
            <span>发布时间：{{article.publishTime | fmtDate}}</span>
            <span>阅读次数：{{article.readTimes}}</span>
          </div>
          <div class="cc" v-html="article.content"> </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Foot></Foot>
    <!-- /底部 -->
  </div>
</template>

<script>
import { get } from '../utils/request'
import Head from './components/Head'
import Foot from './components/Foot'
export default {
  components:{
    Head,
    Foot
  },
  data(){
    return {
      id:0,
      article:null,
    }
  },
  created(){
    this.id = this.$route.query.id;
    this.loadArticle();
  },
  methods:{
    loadArticle(){
      let url = '/index/article/findById'
      get(url,{id:this.id}).then(resp => {
        this.article = resp.data;
      })
    }
  }
  
}
</script>

<style lang="scss" scoped>
// 变量
$color_primary:#028b39;
.article {
  .content {
    background-color: #ecf6f2;
    padding: 0 0;
    .sub_title>span:first-child,.sub_title>span:first-child:hover{
      color: cadetblue;
      font-size: 24px;
      font-weight: bold;
      padding-left: 5%;
      //  padding: 0 5em 0 2em;
      //  text-decoration:underline cadetblue;
      line-height: 2em;
    }
    .sub_title>span:nth-child(2),.sub_title>span:nth-child(2):hover{
      //  border-bottom: 1px solid gray;
      //  padding: 0em .5em 0em 50em;
      padding-left: 45%;
       line-height: 2em;
    }

        img{
      width:98.6%;
      padding-bottom: 0;
    }
    .page_title {
      padding:0;
      font-size: 18px;
      padding:1em 3em;
      font-weight: bold;
      color: #fff;
      position: relative;
      background-color: $color_primary;
      bottom: 6em;
      width: 8%;
    }

    .article_content {
      background-color: #ffffff;
      min-height: 400px;
      border-radius: 5px;
      .title,.info {
        text-align: center;
      }
      .title {
        font-size:18px;
        font-weight:bold;
        color: $color_primary;
        line-height: 2em;
      }
      .info {
        padding:0 0 1em;
        width: 80%;
        margin: 0 auto;
        border-bottom: 1px solid #ededed;
        margin-bottom: .5em;
        & > span{
          padding-left: 1em;
        }
      }
      .cc {
        padding: 0 1em;
      }
    }
  }
}
</style>